<template>
  <div className="App">
    <div id="leftDiv" />
    <div id="my_div">
      <a-row>
        <a-col :span="12">
          <a-date-picker>
            <template #suffixIcon>
              <SmileOutlined />
            </template>
          </a-date-picker>
        </a-col>
        <a-col :span="12">
          <a-month-picker placeholder="Select month">
            <template #suffixIcon>
              <SmileOutlined />
            </template>
          </a-month-picker>
        </a-col>
        <a-col
          :span="24"
          style="margin:10px 0px;"
        >
          <a-range-picker>
            <template #suffixIcon>
              <SmileOutlined />
            </template>
          </a-range-picker>
        </a-col>
        <a-col :span="12">
          <a-week-picker placeholder="Select week">
            <template #suffixIcon>
              <SmileOutlined />
            </template>
          </a-week-picker>
        </a-col>
        <a-col
          :span="12"
          style="margin:10px 0px;"
        >
          <a-date-picker suffix-icon="ab" />
        </a-col>
        <a-col :span="24">
          <a-button
            type="primary"
            @click="setDataPool('numOption', '9999999')"
          >
            9999998
          </a-button>
          <a-button
            style="margin:0px 10px;"
            @click="setDataPool('numOption', '8888888')"
          >
            8888888
          </a-button>
          <a-button
            style="margin:0px 10px;"
            type="dashed"
            @click="setComSeries()"
          >
            改变柱子颜色
          </a-button>
          <a-button
            type="dashed"
            @click="updateComData()"
          >
            改变柱子数据
          </a-button>
        </a-col>
      </a-row>
    </div>
    <div id="rightDiv" />
  </div>
</template>

<script>
import { onMounted, defineComponent } from 'vue'
import { serverURL } from './config';
import { MonetRender } from '@jkyu/monet-draw';
import { SmileOutlined } from '@ant-design/icons-vue';
export default defineComponent({
  name: 'App',
  components: {
    SmileOutlined,
  },
  setup () {
    let leftEvent = null;
    onMounted(() => {
      const leftRender = new MonetRender({
        bigScreenURL: `${serverURL}/#/screen?key=21156a474d064d8d9b8c28eab16106fc`,
        width: '650px',
        height: '300px',
        container: 'leftDiv',
        token: '583e939d75e2515e2107edaa2985f9d1'
      });
      // 初始化数据池
      leftRender.initDataPool = () => ({
        zhangsan: '张三',
        lisi: '李四'
      });
      // 大屏信息渲染前
      leftRender.beforeScreenRender = (screenInfo) => {
        screenInfo.backgroundUrl = 'https://storage.360buyimg.com/visualdata/3c7205a1580a49dea42763f4b52c17a8.png';
      };
      // 组件信息渲染前
      leftRender.beforeComRender = (components) => {
        const idx = components.findIndex(item => item.code === 'ext_tab');
        const oldValue = components[idx].data.value;
        const oldValueObj = JSON.parse(oldValue);
        oldValueObj[idx].option = `二开值:${oldValueObj[0].option}`;
        components[idx].data.value = JSON.stringify(oldValueObj);
      };
      // 监听数据池
      leftRender.watchDataPool = (dataPool) => {
        // eslint-disable-next-line no-console
        console.log(dataPool, 'watch');
      };
      // 组件渲染完成
      leftRender.onload = (monetEvent) => {
        leftEvent = monetEvent;
        monetEvent.setComConfig(1276570, (config) => {
          config.style = {
            backgroundColor: 'rgba(224,72,175,0.5)',
            font: { size: 32, color: '#000000' }
          };
          return config;
        });
      };
      new MonetRender({
        bigScreenURL: `${serverURL}/#/screen?key=c3273a4f75024ff9984bb504d85e7ca0`,
        width: '650px',
        height: '300px',
        container: 'rightDiv',
        token: '583e939d75e2515e2107edaa2985f9d1'
      });
    })

    const setDataPool = (key,value)=>{
      leftEvent.setDataPool(key, value);
    }
    const setComSeries = ()=>{
      leftEvent.setComSeries(1276569, (series) => {
        series[0].barStyle.color = '#6DC8EC';
        return series;
      });
    }
    const updateComData = ()=>{
      const update1 = [
        { x: '一班', y: 10, s: '一' },
        { x: '二班', y: 20, s: '一' },
        { x: '三班', y: 30, s: '一' },
        { x: '四班', y: 50, s: '一' },
        { x: '五班', y: 60, s: '一' },
        { x: '六班', y: 49, s: '一' },
      ];
      const update2 = [
        { number: 1, info: 'aaaaaaaaaaaaaaa' },
        { number: 2, info: 'bbbbbbbbbbbbbbb' },
        { number: 3, info: 'ccccccccccccccc' },
        { number: 4, info: 'ddddddddddddddd' },
        { number: 5, info: 'eeeeeeeeeeeeeee' },
      ];
      leftEvent.setComData({ 1276569: update1, 1276571: update2 });
    }
    return {
      setDataPool,
      setComSeries,
      updateComData
    }
  },
  methods: {
    getCurrentStyle (current) {
      const style = {};
      if (current.date() === 1) {
        style.border = '1px solid #1890ff';
        style.borderRadius = '50%';
      }
      return style;
    },
  },
})
</script>
<style>
.App {
  height: 100vh;
  display: flex;
}
#my_div {
  width: 500px;
  color: #000;
  flex-grow: 0;
  padding: 10px;
}
</style>